<template>
  <view class="fuli-container">
    <!-- 顶部规则按钮 -->
    <view class="rule-btn" @click="showRules">
      <text class="iconfont icon-rules"></text>
      <text>规则</text>
    </view>

    <!-- 顶部福力值信息 -->
    <view class="header-section">
      <view class="header-content">
        <text class="header-title">我的福力值</text>
        <text class="header-value">16,010</text>
        <text class="header-desc">可兑换精美文创礼品</text>
      </view>
      <image class="header-bg" src="/static/fuli-bg.png" mode="aspectFill"></image>
    </view>

    <!-- 签到区域 -->
    <view class="signin-section">
      <view class="signin-header">
        <text class="signin-title">每日签到</text>
        <text class="signin-days">已连续签到3天</text>
      </view>

      <view class="signin-calendar">
        <view class="calendar-day" v-for="(day, index) in 7" :key="index"
              :class="{active: index < 3, today: index === 3}">
          <text class="day-name">{{ ['日','一','二','三','四','五','六'][index] }}</text>
          <text class="day-point" v-if="index < 3">+10</text>
          <text class="day-point today" v-if="index === 3">+20</text>
        </view>
      </view>

      <button class="signin-btn" :class="{signed: isSigned}" @click="handleSignin">
        {{ isSigned ? '今日已签到' : '立即签到' }}
      </button>
    </view>

    <!-- 任务中心 -->
    <view class="task-section">
      <view class="section-header">
        <text class="section-title">任务中心</text>
        <text class="section-more">查看更多 ></text>
      </view>

      <view class="task-list">
        <view class="task-item" v-for="(task, index) in tasks" :key="index">
<!--          <image class="task-icon" :src="task.icon"></image>-->
          <view class="task-info">
            <text class="task-name">{{ task.name }}</text>
            <text class="task-desc">{{ task.desc }}</text>
          </view>
          <button class="task-btn" :class="{completed: task.completed}">
            {{ task.completed ? '已完成' : `+${task.points}` }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSigned: false,
      tasks: [
        {
          name: "完善信息",
          desc: "完善个人信息",
          icon: "/static/fuli1.png",
          points: 50,
          completed: false
        },
        {
          name: "界面浏览",
          desc: "浏览介绍神仙界面五分钟",
          icon: "/static/fuli2.png",
          points: 100,
          completed: true
        },
        {
          name: "购买商品",
          desc: "购买一种青城山道教文创",
          icon: "/static/fuli3.png",
          points: 200,
          completed: false
        },
        {
          name: "线上答题",
          desc: "在规定时间完成答题",
          icon: "/static/fuli4.png",
          points: 150,
          completed: true
        }
      ]
    };
  },
  methods: {
    showRules() {
      uni.showModal({
        title: '福力值规则',
        content: '1. 签到可获得福力值\n2. 完成任务可获得额外福力值\n3. 福力值可兑换文创礼品\n4. 每月1日福力值清零',
        showCancel: false
      });
    },
    handleSignin() {
      if (!this.isSigned) {
        this.isSigned = true;
        uni.showToast({
          title: '签到成功 +20福力值',
          icon: 'success'
        });
      }
    }
  }
};
</script>

<style lang="scss">
.fuli-container {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 20px;
}

/* 规则按钮 */
.rule-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 10;
  background: rgba(255,255,255,0.8);
  padding: 5px 10px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  .icon-rules {
    margin-right: 5px;
    font-size: 16px;
  }
}

/* 头部区域 */
.header-section {
  position: relative;
  height: 180px;
  padding: 20px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(135deg, #8BC6A4, #4CAF93);

  .header-content {
    position: relative;
    z-index: 2;
  }

  .header-title {
    display: block;
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 5px;
  }

  .header-value {
    display: block;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
  }

  .header-desc {
    display: block;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
  }

  .header-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    opacity: 0.2;
  }
}

/* 签到区域 */
.signin-section {
  background: #fff;
  margin: 15px;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);

  .signin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .signin-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .signin-days {
      font-size: 14px;
      color: #4CAF93;
      background: rgba(76,175,147,0.1);
      padding: 3px 8px;
      border-radius: 10px;
    }
  }

  .signin-calendar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .calendar-day {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 14%;

      .day-name {
        font-size: 14px;
        color: #999;
        margin-bottom: 5px;
      }

      .day-point {
        font-size: 12px;
        color: #4CAF93;
        background: rgba(76,175,147,0.1);
        padding: 2px 5px;
        border-radius: 8px;

        &.today {
          color: #FF9800;
          background: rgba(255,152,0,0.1);
        }
      }

      &.active {
        .day-name {
          color: #4CAF93;
          font-weight: bold;
        }
      }

      &.today {
        .day-name {
          color: #FF9800;
          font-weight: bold;
        }
      }
    }
  }

  .signin-btn {
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: linear-gradient(to right, #8BC6A4, #4CAF93);
    color: #fff;
    font-size: 16px;
    border-radius: 25px;
    border: none;

    &.signed {
      background: #eee;
      color: #999;
    }
  }
}

/* 任务中心 */
.task-section {
  background: #fff;
  margin: 15px;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .section-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .section-more {
      font-size: 14px;
      color: #999;
    }
  }

  .task-list {
    .task-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .task-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
      }

      .task-info {
        flex: 1;

        .task-name {
          display: block;
          font-size: 16px;
          color: #333;
          margin-bottom: 3px;
        }

        .task-desc {
          display: block;
          font-size: 12px;
          color: #999;
        }
      }

      .task-btn {
        width: 80px;
        height: 32px;
        line-height: 32px;
        background: linear-gradient(to right, #8BC6A4, #4CAF93);
        color: #fff;
        font-size: 14px;
        border-radius: 16px;
        border: none;

        &.completed {
          background: #eee;
          color: #999;
        }
      }
    }
  }
}
</style>
